<section [ngClass]="['bg' + contrast, 'text' + defaultInv]">
	<div class="container py-12 mx-auto md:px-8">
		<div class="px-4 py-10">
			<div class="flex flex-col flex-wrap justify-between md:flex-row">
				<div class="mt-4 lg:mt-0">
					<div>
						<h2 class="text-3xl font-semibold lg:text-4xl">
							Frequently asked questions
						</h2>
					</div>
				</div>
				<div class="flex">
					<div class="relative pt-2">
						<input
							class="h-10 px-5 pr-16 text-sm bg-white rounded-lg focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 focus:outline-none"
							type="search"
							name="search"
							placeholder="Search"
						/>
						<button
							type="submit"
							class="absolute bg-white top-5 right-4 focus:ring-2 focus:ring-offset-2 focus:text-indigo-700 focus:rounded-full focus:bg-gray-100 focus:ring-indigo-700 focus:outline-none"
						>
							<svg
								class="w-4 h-4 fill-current"
								xmlns="http://www.w3.org/2000/svg"
								xmlns:xlink="http://www.w3.org/1999/xlink"
								version="1.1"
								id="Capa_1"
								x="0px"
								y="0px"
								viewBox="0 0 56.966 56.966"
								style="enable-background: new 0 0 56.966 56.966"
								xml:space="preserve"
								width="512px"
								height="512px"
							>
								<path
									d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
								/>
							</svg>
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="px-6">
			<div
				class="grid gap-8 pb-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"
			>
				<div
					class="relative w-full h-full p-5 bg-white rounded-md"
					[ngClass]="['bg' + default]"
				>
					<img
						class="p-2 mb-5 bg-gray-200 rounded-full"
						src="https://i.ibb.co/27R6nk5/home-1.png"
						alt="home-1"
					/>
					<h3 class="pb-4 text-2xl font-semibold">Account Overview</h3>
					<div class="my-5">
						<div
							class="flex items-center w-full pb-4 space-x-3 cursor-pointer dark:border-gray-700"
						>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								width="12.5"
								height="16"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M9 5l7 7-7 7"
								/>
							</svg>
							<h4 class="text-gray-900 text-md dark:text-gray-100">
								First time, what do I do next?
							</h4>
						</div>
						<div
							class="flex items-center w-full pb-4 space-x-3 cursor-pointer dark:border-gray-700"
						>
							<div>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="12.5"
									height="16"
									fill="none"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M9 5l7 7-7 7"
									/>
								</svg>
							</div>
							<h4 class="text-gray-900 text-md dark:text-gray-100">
								Changing you profile picture and other information
							</h4>
						</div>
						<div
							class="flex items-center w-full pb-4 cursor-pointer dark:border-gray-700"
						>
							<div>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="12.5"
									height="16"
									fill="none"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M9 5l7 7-7 7"
									/>
								</svg>
							</div>
							<h4 class="pl-4 text-gray-900 text-md dark:text-gray-100">
								I didnt get a confirmation email, what should I do next
							</h4>
						</div>
						<div
							class="flex items-center w-full pb-4 cursor-pointer dark:border-gray-700"
						>
							<div>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="12.5"
									height="16"
									fill="none"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M9 5l7 7-7 7"
									/>
								</svg>
							</div>
							<h4 class="pl-4 text-gray-900 text-md dark:text-gray-100">
								What is the refund policy if I have to cancel during the month
							</h4>
						</div>
					</div>
					<a
						class="flex items-center text-sm font-semibold text-indigo-700 hover:text-indigo-500 hover:underline"
						href="#"
					>
						<p>Show All</p>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="w-4 h-4 stroke-current"
							width="16"
							height="16"
							viewBox="0 0 24 24"
							stroke-width="1.5"
							stroke-linecap="round"
							stroke-linejoin="round"
						>
							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
							<line x1="5" y1="12" x2="19" y2="12" />
							<line x1="15" y1="16" x2="19" y2="12" />
							<line x1="15" y1="8" x2="19" y2="12" />
						</svg>
					</a>
				</div>
			</div>
		</div>
	</div>
</section>
